@import '../../ui/base'

.avatar
  > div
    > p:first-child
      max-width: 80px;
      word-break: break-all;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

.right-list-avatar
  > div
    > a
      max-width: 90px;
      word-break: break-all;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

.nav
  line-height 1
  width 175px
  > header
    padding-left 20px
    flex 1
    height 60px
    a
      border 1px solid #afc9e2
  .list
    margin-top 10px
    padding 20px
    flex 1
  .group
    &.short
      > header
        &::after
          transform translate(41px, 6px)
          width 96px
    > header
      color #C7D5E2
      font-size 12px
      position relative
      &::after
        content ''
        background-color #DDE9F8
        position absolute
        width  72px
        height 1px
        left  0
        top 0
        transform translate(65px, 6px)
    > .children
      margin 30px 0
      li
        margin-left 15px
        & + li
          margin-top 25px
        a
          font-size 14px
          i
            margin-right 15px
            font-size 20px
            width 16px
            height 20px


.right-list
  width 260px
  > div
    border 1px solid #dde9f8
    padding 10px 20px 10px 20px
  > div + div
    margin-top 15px
  h2
    display flex
    align-items center
    justify-content space-between
    border-bottom 1px solid #dde9f8
    padding-bottom 10px
    margin-bottom 15px
    > span
      font-size 14px
      color #777
    a
      font-size 12px
  li
    clear fix
    & + li
      margin-top 25px
      &:last-child
        margin-bottom 15px
    > div
      float left
    > span
      float right
      font-size 14px
      color rgb(153, 153, 153)
      margin-top 6px
      line-height 1

.root
  display flex
  justify-content space-between

._right-list
  > div
    border 1px solid #dde9f8
    padding 15px 20px 0 20px
  > div + div
    margin-top 15px
  h2
    font-size 14px
    color #777
    border-bottom 1px solid #dde9f8
    padding-bottom 15px
    margin-bottom 15px
  li
    clear fix
    & + li
      margin-top 25px
      &:last-child
        margin-bottom 15px
    > div
      float left
    > span
      float right
      font-size 14px
      color rgb(153, 153, 153)
      margin-top 6px
      line-height 1

.moreRightList
  display flex
  justify-content center
  align-items center
  height 36px
  background-color #f3f6f9
  color $font-blue
  margin-top 15px
  margin-left -20px
  margin-right -20px
  a
    font-size 12px

.nav-content
  > div:first-child
    background-color #f3f6f9
    padding 15px 20px
  [data-sub-role="nav"]
    border-right none
    a
      font-size 16px
      > i
        width 16px
        height 16px
        font-size 16px
  [data-sub-role="sub-nav"]
    > h2
      font-size 16px
      color #333
      border-bottom 1px solid #ddd
      padding 10px 0
    position absolute
    top 432px

.notifications
  width 500px
  padding 0
  .notif_date
    padding 20px 0
    font-size 13px
    color #333
    font-weight bold
  .message_list>div
    display block
    text-decoration none
    font-size 13px
    color #777
    padding-left 30px
    line-height 40px
    &:hover
      background #f3f6f9
    &[data-read="0"]
      background #f3f6f9
      &:hover
        background #E0E8EF
.pagin
  @extends .h-center
  margin 30px 0
  > ul
    clear fix
    margin 0 20px
    > li
     float left
     margin 0 5px
     a
      transition color .2s
      display block
      line-height 1
      padding 2px 5px
      &:hover
        color #8a949c
      &.active
        background-color #8a949c
        color #fff
